import styled from "styled-components";

export const QuestionContent = styled.div`
  max-width: 1000px;
  max-height: 100%;
  margin: 0 auto;
  .question-header {
    padding: 10px 30px;
    background: #2071e2;
  }
  .question-section {
    padding: 10px;
  }
  .header-title {
    text-align: center;
    color: #fff;
    font-weight: 700;
    margin: 0;
  }
  .question-content {
    margin-bottom: 10px;
  }
  .question-item {
    margin-bottom: 10px;
    font-size: 16px;

    .ant-form-item {
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 0;
    }

    .grid .ant-checkbox-group,
    .grid .ant-radio-group {
      width: 100%;
    }
    .ant-checkbox-wrapper {
      font-size: 16px;
    }
    .item-option {
      width: 100%;
      margin: 0;
      line-height: 40px;
      font-size: 16px;
      padding: 0 10px;
      white-space: pre-wrap;

      &:hover {
        background: #f9f9f9;
      }
    }
  }
  .ant-btn {
    margin-top: 10px;
  }

  .matrix-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
`;

export const SuccessContent = styled.div`
  width: 100%;
  height: 100%;
  background: #2071e2;
  text-align: center;
  .success-box {
    font-size: 25px;
    color: #fff;
    P {
      font-weight: 700;
    }
  }
`;
